<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">

        <Select style="width:150px" v-model="country" placeholder="请选择国家">
          <Option value="china">中国</Option>
        </Select>

        <Select v-model="province" style="width:150px" placeholder="请选择省份" :label-in-value="true" @on-change="selectProvince">
          <Option v-for="item in provinceList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
        </Select>

        <Select v-model="city" style="width:150px" placeholder="请选择城市" :disabled="!province" :label-in-value="true" @on-change="selectCity">
          <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
        </Select>

        <Select v-model="area" style="width:150px" placeholder="请选择区县" :disabled="!city||areaList.length == 0" :label-in-value="true" @on-change="selectArea">
          <Option v-for="item in areaList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
        </Select>

        <Select v-model="model1" style="width:150px" placeholder="请选择站点" disabled :label-in-value="true">
          <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
        </Select>

        <Select v-model="model2" multiple style="width:200px" placeholder="请选择年份">
          <Option value="2017"></Option>
          <Option value="2018"></Option>
        </Select>

        <Button type="primary" icon="ios-search" :loading="loading">搜索</Button>
      </div>

      <Poptip class="pull-right" placement="bottom-end">
        <Button>说明</Button>
        <div slot="content">
          说明： <br>
          1、同比环比模块可通过查询条件，查询某一地区或站点，消耗量不同年份和月份的对比。<br>
          2、年份可以通过勾选，选择要作对比的年份。<br>
          3、<br>
          搜索条件国家项默认为中国，<br>
          当搜索条件选择至国家时，统计结果为所选国家的消耗量对比；<br>
          当搜索条件选择至省份时，统计结果为所选省份的消耗量对比；<br>
          当搜索条件选择至城市时，统计结果为所选城市的消耗量对比；<br>
          当搜索条件选择至区县时，统计结果为所选区县的消耗量对比；<br>
          当搜索条件选择至站点时，统计结果为所选站点的消耗量对比；<br>
          统计表标题随以上内容变化。
        </div>
      </Poptip>

      <div id="chart"></div>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  .top-tip{
    float: right;
    width: 380px;
    padding: 15px;
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    border-radius: 4px;
    line-height: 1.6;
    margin-top: 10px;
    position: absolute;
    right: 24px;
    z-index: 3;
  }
  #chart{
    width: 100%;
    height: 600px;
    margin: 10px auto;
  }
</style>
<script>

  //import api from '@/fetch/api';
  import echarts from 'echarts';
  import 'echarts/chart/line';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  export default {
    beforeMount () {

    },
    mounted() {
      //this.getList();
      this.initChart();
      //初始化省
      this.getProvince();
    },
    data () {
      return {
        loading: false,
        list: {},
        cityList: [],
        provinceList:[],
        areaList:[],
        city:null,
        province:null,
        area:null,
        country: 'china',
        model1: '',
        model2: [],
        option:{},
        colors:['#5793f3', '#d14a61', '#675bba']
      }
    },
    methods: {
      initChart(){
          let $this = this;
          $this.option = {
            color: $this.colors,
            title:{
              text:'消耗量对比',
              left:'20px'
            },
            tooltip: {
              trigger: 'none',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data:['2015 消耗量', '2016 消耗量']
            },
            grid: {
              top: 70,
              bottom: 50
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  onZero: false,
                  lineStyle: {
                    color: $this.colors[1]
                  }
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return '消耗量  ' + params.value
                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                  }
                },
                data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
              },
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  onZero: false,
                  lineStyle: {
                    color: $this.colors[0]
                  }
                },
                axisPointer: {
                  label: {
                    formatter: function (params) {
                      return '消耗量  ' + params.value
                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                  }
                },
                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name:'2015 消耗量',
                type:'line',
                xAxisIndex: 1,
                smooth: true,
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
              },
              {
                name:'2016 消耗量',
                type:'line',
                smooth: true,
                data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
              }
            ]
          };
          var echartsOne = document.getElementById('chart');
          var myChart = echarts.init(echartsOne);

          myChart.setOption($this.option);
      },
      getProvince(){
        let $this = this;
        let params = {
          id:0
        };
        $this.$emit('showLoading');
        api.fetchGet(api.path.findSubRegion, params).then((data) => {
          $this.$emit('hideLoading');
          $this.provinceList = data.data;

        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      getCity(id){
        let $this = this;
        let params = {
          id:id
        };
        $this.$emit('showLoading');
        api.fetchGet(api.path.findSubRegion, params).then((data) => {
          $this.$emit('hideLoading');
          $this.cityList = data.data;

        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      getArea(id){
        let $this = this;
        let params = {
          id:id
        };
        $this.$emit('showLoading');
        api.fetchGet(api.path.findSubRegion, params).then((data) => {
          $this.$emit('hideLoading');
          $this.areaList = data.data;

        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      selectProvince(data){
        console.log(data);
        this.cityList = [];
        this.areaList = [];
        this.getCity(data.value);

      },
      selectCity(data){
        console.log(data);
        this.areaList = [];
        this.getArea(data.value);
      },
      selectArea(data){
        console.log(data);
      },
    },
  };
</script>
